<template>
    <div :class="['head-box',isShow?'':'head-box-index']">
        <div id="logo" ><img src="../assets/logo.png"  :class="[isShow?'':'head-margin']" /></div>
        <div class="head-list" v-if="isShow">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1"><a href="/index">首页</a></el-menu-item>
                <el-submenu index="2">
                    <template slot="title"><a href="#">课程分类</a></template>
                    <el-menu-item v-for="(item,index) in courseList" :index="'2-'+index+1" :key="index">{{item.subjectTitle}}</el-menu-item>
                </el-submenu>
                <el-menu-item index="3"><a href="#" target="_blank">专属课程</a></el-menu-item>
            </el-menu>
        </div>
        <div class="input-box">
            <input type="text" placeholder="搜索课程">
            <el-button type="primary" icon="el-icon-search" class="search-button">搜索</el-button>
        </div>
        <div class="user-box" style="display: flex">
            <a href="#">
                <span class="shoping-car">
<svg t="1639816175144" class="icon" viewBox="0 0 1114 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3159" width="20" height="20"><path d="M334.366118 602.352941h667.286588L1054.117647 210.823529H248.289882l86.076236 391.529412zM222.117647 150.588235H1054.117647a60.235294 60.235294 0 0 1 59.693177 68.246589l-52.464942 391.529411A60.235294 60.235294 0 0 1 1001.652706 662.588235H336.715294l26.955294 120.470589H933.647059a30.117647 30.117647 0 0 1 0 60.235294H339.516235a30.117647 30.117647 0 0 1-29.394823-23.552L140.167529 60.235294H30.117647a30.117647 30.117647 0 0 1 0-60.235294h134.174118a30.117647 30.117647 0 0 1 29.394823 23.552L222.117647 150.588235zM331.294118 963.764706a60.235294 60.235294 0 1 0 0-120.470588 60.235294 60.235294 0 0 0 0 120.470588z m0 60.235294a120.470588 120.470588 0 1 1 0-240.941176 120.470588 120.470588 0 0 1 0 240.941176z m602.352941-60.235294a60.235294 60.235294 0 1 0 0-120.470588 60.235294 60.235294 0 0 0 0 120.470588z m0 60.235294a120.470588 120.470588 0 1 1 0-240.941176 120.470588 120.470588 0 0 1 0 240.941176z" fill="#8a8a8a" p-id="3160"></path></svg>
                </span>
            </a>
            <div class="line">
                <span>
                    |
                </span>
            </div>
            <div style="display:flex">
                <div>
                    <a href="#">登录/注册</a>
                </div>
                <span class="head-portrait">
               <svg t="1639816402462" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8699" width="16" height="16"><path d="M309.52 494.12c-1.94 0-3.47 0.28-4.67 0.76 1.63-0.49 3.37-0.76 5.16-0.76L309.52 494.12zM845.13 707.52c0.05-0.99 0.18-1.96 0.39-2.9C845.29 705.05 845.17 705.97 845.13 707.52zM880.86 313.29c0.01-0.04 0.01-0.09 0.01-0.13l0-0.46C880.87 312.9 880.87 313.1 880.86 313.29zM845.11 313.23c0 0.04 0 0.08 0.01 0.12-0.01-0.21-0.01-0.43-0.01-0.65L845.11 313.23zM866.673 849.43c-5.03-37.45-16.03-73.61-32.69-107.48-3.26-6.62-6.71-13.13-10.37-19.51-0.01-0.02-0.02-0.04-0.04-0.06-15.86-26.86-35.32-51.8-58-74.06l-0.01-0.01c-4.93-4.84-10.01-9.56-15.24-14.14-37.29-32.68-80.34-56.91-126.25-71.65 8.31-4.6 16.35-9.76 24.07-15.47 8.79-6.48 17.16-13.68 25.03-21.55 41.39-41.39 64.19-96.43 64.19-154.97 0-58.54-22.8-113.58-64.19-154.97-40.64-40.64-94.44-63.35-151.78-64.17-0.91-0.01-1.82-0.02-2.73-0.02-0.91 0-1.82 0.01-2.73 0.02-57.34 0.82-111.14 23.53-151.78 64.17-41.39 41.39-64.19 96.43-64.19 154.97 0 58.54 22.8 113.58 64.19 154.97 7.87 7.87 16.24 15.07 25.03 21.55 7.72 5.71 15.76 10.87 24.07 15.47-45.91 14.74-88.96 38.97-126.25 71.65-5.23 4.58-10.31 9.3-15.24 14.14-22.7 22.28-42.18 47.24-58.05 74.13-3.66 6.38-7.11 12.89-10.37 19.51-16.66 33.87-27.66 70.03-32.69 107.48-1.61 12 6.81 23.03 18.8 24.64 0.99 0.13 1.98 0.2 2.95 0.2 0.89 0 1.76-0.05 2.63-0.16 8.67-1.89 15.67-8.96 17.03-18.25 10.1-69.32 43.14-132.31 90.63-180.28 56.36-56.95 133.07-92.74 215.97-92.88l0.47 0c82.72 0.28 159.25 36.04 215.5 92.88 47.49 47.97 80.53 110.96 90.63 180.28 1.36 9.27 8.33 16.33 16.98 18.24 0.02 0 0.03 0.01 0.05 0.01 0.87 0.11 1.74 0.16 2.63 0.16 0.97 0 1.96-0.07 2.95-0.2C859.863 872.46 868.283 861.43 866.673 849.43zM518.193 545.86c-0.44 0-0.88 0-1.32-0.01-81.8-0.6-154.73-57.43-174.66-133.66-0.22-0.83-0.44-1.67-0.64-2.51-3.12-12.6-4.78-25.7-4.78-39.15 0-13.45 1.66-26.7 4.78-39.52 0.2-0.86 0.42-1.71 0.64-2.56 20.04-78.14 93.65-140.25 175.98-140.25l0.94 0c82.33 0 155.94 62.11 175.98 140.25 0.22 0.85 0.44 1.7 0.64 2.56 3.12 12.82 4.78 26.07 4.78 39.52 0 13.45-1.66 26.55-4.78 39.15-0.2 0.84-0.42 1.68-0.64 2.51-19.93 76.23-92.86 133.06-174.66 133.66C519.703 545.86 518.953 545.86 518.193 545.86z" p-id="8700" fill="#ffffff"></path></svg>
                </span>

            </div>
        </div>
    </div>
</template>

<script>
    import {getCourselist} from "../api";

    export default {
        name: "TopHead",
        props:{
            isShow:{
                type:Boolean,
                default:true
            },//课程列表是否显示的参数
        },
        created() {
            getCourselist().then(res=>{
                this.courseList=res.rows
            })
        },
        data() {
                return {
                    activeIndex: '1',
                    activeIndex2: '1',
                    courseList:[],
                };
            },
            methods: {
                handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                },
            },

        }
</script>

<style scoped lang="less">
    @color:#00cf8c;
    @left:159.6px;
    /*整个头部组件根标签*/
    .head-box {
        margin-left: @left;
        margin-right: @left;
        height: 80px;
    }
    /*头部组件在index页面的高度*/
    .head-box-index {
        width: 1200px;
        height: 106px;
    }
    /*头部组件在index没有课程列表的情况下*/
    .head-margin {
        margin-right: 200px;
    }
    /*logo盒子*/
    #logo{
        float: left;
        img {
            width: 179.188px;
            height: 55px;
            margin-top: 16px;
        }
    }
    /*课程列表*/
    .head-list {
        float: left;
        margin: 10px 30px 0 40px;
        /*width: 266.39px;*/
        height: 30px;
        ul {
            border: 0;
        }
        a {
            font-size: 16px;
        }
    }
    .el-menu-item {
        padding-left: 0;
    }
    .el-menu--horizontal>.el-menu-item.is-active {
        border: 0;
    }
    .el-menu-demo {
        /*width: 266.39px;*/
        /*height: 30px;*/
    }
    /*搜索框*/
    .input-box {
        float: left;
        margin-top: 24px;
        margin-right: 6px;
        input {
            float: left;
            width: 317px;
            height: 38px;
            padding: 6px 11px;
            border: 1px solid #d9d9d9;
            border-radius: 20px;
            text-align: inherit;
            font-size: 16px;
            box-sizing: border-box;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            color: rgba(0,0,0,.65);
            border-right: 0;
        }
    }
    /*搜索按钮*/
    .search-button {
        background-color: @color;
        float: left;
        width: 83px;
        height: 38px;
        color: white;
        line-height: 100%;
        border-radius: 20px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border: 1px solid #d9d9d9;
    }
    .search-button:hover{
        background-color: @color;
        border: 1px solid #d9d9d9;
    }
    /*右边购物车及个人*/
    .user-box {
        float: right;
        margin: 26px 100px 0 0;
    }
    .el-icon-s-custom {
        width: 32px;
        height: 32px;
    }
    .shoping-car {
        i {
            width: 20px;
            height: 20px;
        }
    }
    .line {
        height: 18px;
        margin: 0px 10px;
        color: #e8e8e8;
        font-size: 14px;
        line-height: 1.5;
    }
    .head-portrait {
        display: block;
        margin-left: 8px;
        margin-top: -5px;
        width: 32px;
        height: 32px;
        background: #ccc;
        text-align: center;
        line-height: 32px;
        border-radius: 50%;
    }
</style>